<template>
  <div class="rms-details">
    <div class="query-container">
      <el-form inline
               label-width="90px">
        <el-form-item v-if="menuId == 312 || menuId == 326 || menuId == 336"
                      label="年份"
                      :required="true">
          <el-select v-model="particularYear"
                     placeholder="请选择年份"
                     style="width: 226px"
                     @input="clearYear">
            <el-option v-for="item in yearList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="menuId == 323 || menuId == 324 || menuId == 325"
                      label="月份"
                      :required="true">
          <el-date-picker v-model="time"
                          style="width: 226px"
                          type="monthrange"
                          range-separator="至"
                          start-placeholder="开始月份"
                          end-placeholder="结束月份"
                          :picker-options="pickerOptions"
                          @change="selectMonth">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="menuId == 336"
                      label="发货方名称"
                      prop="consigner">
          <el-autocomplete v-model="consigner"
                           class="inline-input"
                           :fetch-suggestions="querySearch"
                           placeholder="请选择发货方名称"
                           @select="handleSelect"></el-autocomplete>
        </el-form-item>
        <el-form-item style="width:202px;float: right">
          <el-button type="primary"
                     icon="el-icon-search"
                     @click="search(1)">查询</el-button>
          <el-button type="primary"
                     icon="el-icon-delete"
                     @click="resetForm">清除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom-container">
      <el-form>
        <el-form-item v-if="menuId == 336"
                      style="float: left">
          <span>{{consignerShow}}</span>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="default"
                     icon="el-icon-s-promotion"
                     @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading"
                class="table-container"
                stripe
                border
                :data="tableData"
                element-loading-text="加载中"
                element-loading-spinner="el-icon-loading"
                show-summary
                :summary-method="getSummaries">
        <el-table-column v-for="(column, index) in columns"
                         :key="index"
                         :prop="column.prop"
                         :label="column.name"
                         :align="column.align?column.align:'right'">
          <template slot-scope="scope">
            <span v-if="column.align != 'left' && 
                          column.prop != 'totalWaybill'">
              {{scope.row[column.prop]?conversion(scope.row[column.prop]):'0.00'}}</span>
            <span v-else-if="column.align != 'left' && 
                              column.prop == 'totalWaybill'">
              {{scope.row[column.prop]?conversion(scope.row[column.prop]):'0'}}</span>
            <span v-else>{{scope.row[column.prop]}}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="menuId == 323 || menuId == 324"
                         label='操作'>
          <template slot-scope="scope">
            <span style="color:var(--prev-color-primary);cursor: pointer"
                  @click="dialog(scope.row)">明细</span>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="menuId == 312 || menuId == 325 || 
                                      menuId == 326"
           class="goods-sum-box">
        <div>
          {{totalType(menuId)}}<span class="value-color">
            {{ conversion(total) }}元</span>
        </div>
      </div>
    </div>
    <el-dialog title="明细"
               :visible.sync="dialogVisible"
               width="98%"
               :value.sync="shipData"
               :before-close="handleClose">
      <RmsDetail :value="shipData"
                 :ship-time="shipTime"></RmsDetail>
    </el-dialog>
  </div>
</template>

<script src="./rmsJs/RmsDetails.js"></script>

<style scoped>
.table-container >>> .el-table__body-wrapper {
  height: calc(100% - 100px);
  overflow-y: auto;
}
.bottom-container >>> .el-pagination {
  margin-top: 20px;
  /* text-align: right; */
}
.bottom-container >>> .el-table tr {
  background-color: var(--prev-bg-white);
  height: 50px;
  font-size: 14px;
}
.rms-details >>> .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: 1px solid var(--prev-border-color-lighter);
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 20px;
  color: #333333;
  opacity: 1;
}
</style>
<style lang="scss" scoped>
.rms-details {
  width: 100%;
  height: 100%;
  .query-container {
    padding: 20px 20px 20px 0;
    background: var(--prev-bg-white);
    box-shadow: 0px 3px 6px rgba(35, 35, 35, 0.16);
  }
  .bottom-container {
    padding: 20px;
    margin-top: 12px;
    background: var(--prev-bg-white);
    height: calc(100vh - 270px);
    box-shadow: 0px 3px 6px rgba(35, 35, 35, 0.16);
    .table-container {
      height: calc(100% - 100px);
      .target-power {
        display: flex;
        .power {
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .goods-sum-box {
    display: flex;
    padding-top: 20px;
    line-height: 30px;
    color: var(--prev-color-text-ashes);
    padding-right: 80px;
  }
  .value-color {
    color: var(--prev-color-primary) !important;
  }
}
</style>
